<template>
  <div class="explainText">
    <p>
      在 filterable 模式下，开启属性 allow-create
      可以通过在输入框中输入文字来创建新的条目。
    </p>
    <p>输入新条目后，按下回车键即可新建条目。需配合 @on-create 事件使用。</p>
  </div>
  <div style="display: flex; width: 700px; justify-content: space-between;">
    <e-select
      style="width: 300px"
      v-model="model"
      filterable
      allow-create
      @on-create="handleCreate1"
    >
      <e-option
        v-for="item in cityList3"
        :value="item.value"
        :key="item.value">{{ item.label }}</e-option>
    </e-select>
    <e-select
      style="width: 300px"
      v-model="model1"
      filterable
      multiple
      allow-create
      @on-create="handleCreate2"
    >
      <e-option
        v-for="item in cityList4"
        :value="item.value"
        :key="item.value">{{ item.label }}</e-option
      >
    </e-select>
  </div>
</template>
<script>
export default {
  data() {
    return {
      cityList3: [
        {
          value: 'New York',
          label: 'New York',
        },
        {
          value: 'London',
          label: 'London',
        },
        {
          value: 'Sydney',
          label: 'Sydney',
        },
        {
          value: 'Ottawa',
          label: 'Ottawa',
        },
        {
          value: 'Paris',
          label: 'Paris',
        },
        {
          value: 'Canberra',
          label: 'Canberra',
        },
      ],
      cityList4: [
        {
          value: 'New York',
          label: 'New York',
        },
        {
          value: 'London',
          label: 'London',
        },
        {
          value: 'Sydney',
          label: 'Sydney',
        },
        {
          value: 'Ottawa',
          label: 'Ottawa',
        },
        {
          value: 'Paris',
          label: 'Paris',
        },
        {
          value: 'Canberra',
          label: 'Canberra',
        },
      ],
      model: '',
      model1: [],
    }
  },
  methods: {
    handleCreate1(val) {
      this.cityList3.push({
        value: val,
        label: val,
      })
    },
    handleCreate2(val) {
      this.cityList4.push({
        value: val,
        label: val,
      })
    },
  },
}
</script>
<style>
.explainText {
  /* display: flex; */
  font-size: 14px;
  color: #9013fe;
  margin: 10px 0px;
}
.explainText > p {
  font-size: 14px;
  color: #6f7d96;
  padding-left: 10px;
}
</style>
